<template>
	<view class="my_layout">
		<!-- 占位区域 -->
		<view class="empty_layout">
			
		</view>
		<!-- 功能区域 -->
		<view class="my_layout_header">
			<view class="layout_top">
				<view class="my_info">
					<view class="my_avtor">
						<image class="avtor_img" src="../../static/imgs/logo.jpg" mode="aspectFill"></image>
					</view>
					<view class="my_name">
						<text>达拉崩吧</text>
					</view>
				</view>
				
				<view class="some_icon">
					<view class="icon_item">
						<uni-icons type="wallet-filled" :size="icon_item_size"></uni-icons>
						<text class="item_desc">¥0</text>
					</view>
					<view class="icon_item">
						<uni-icons type="person" :size="icon_item_size"></uni-icons>
						<text class="item_desc">团员</text>
					</view>
					<view class="icon_item">
						<uni-icons type="shop" :size="icon_item_size"></uni-icons>
						<text class="item_desc">店铺</text>
					</view>
					<view class="icon_item">
						<uni-icons type="staff" :size="icon_item_size"></uni-icons>
						<text class="item_desc">社群</text>
					</view>
				</view>
			</view>
			<MyFunctionList></MyFunctionList>
		</view>
		
		<!-- 公告栏 -->
		<view class="my_notice">
			<uni-notice-bar class="notice_detail" show-icon show-close text="uni-app发布，开发一次、7端覆盖！" />
		</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';

const icon_item_size = 30


// 切换店铺与会员功能列表
const isStore = ref(false)
</script>

<style lang="scss" scoped>
.my_layout{
	height: 100vh;
	width: 100%;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	background: linear-gradient(to top ,#FEFBEF,#FFF 80%);
	z-index: 3;
	.empty_layout{
		height: 100rpx;
	}
	.my_layout_header{
		background-color: #FFF;
		z-index: 5;
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		width: calc(100% - 80rpx);
		border-radius: 0 0 20rpx 20rpx;
		padding: 10rpx;
		.layout_top{
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
			.my_info{
				display: flex;
				align-items: center;
				.my_avtor{
					width: 100rpx;
					height: 100rpx;
					.avtor_img{
						width: 100%;
						height: 100%;
					}
				}
				.my_name{
					padding: 20rpx;
					font-size: 34rpx;
					font-weight: 600;
				}
			}
			.some_icon{
				width: 100%;
				margin-top: 40rpx;
				// display: grid;
				// grid-template-columns: repeat(4,1fr);
				display: flex;
				justify-content: space-evenly;
				.icon_item{
					width: 70rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item_desc{
						font-size: 24rpx;
						font-weight: 300;
					}
				}
			}
			
		}
		// .laytout_feature{
		// 	width: 100%;
		// 	.feature_title{
		// 		margin-top: 20rpx;
		// 		font-size: 34rpx;
		// 		font-weight: 600;
		// 	}
		// 	.layout_content_store{
		// 		margin-top: 20rpx;
		// 		height: auto;
		// 		display: grid;
		// 		grid-template-columns: repeat(4,1fr);
		// 		.content_item{
		// 			display: flex;
		// 			flex-direction: column;
		// 			justify-content: center;
		// 			align-items: center;
		// 			margin-bottom: 15rpx;
		// 			.item_desc{
		// 				font-size: 24rpx;
		// 				font-weight: 300;
		// 			}
		// 		}
		// 	}
		// }
	}
	
	.my_notice{
		width: calc(100% - 80rpx);
		height: 80rpx;
		margin-top: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
		
	}
}
</style>
